<template>
  <el-container>

    <el-header class="el-header">
      <!-- 返回按钮 -->
      <el-button
          class="back-button"
          :icon="Back"
          size="default"
          @click="goBack"
      >
        返回
      </el-button>
      <div style="display: flex; align-items: center;">
        <el-tooltip
            effect="light"
            content="Gitee仓库"
            placement="bottom">
          <el-button style="margin-right: 30px" :icon="Reading" circle></el-button>
        </el-tooltip>

        <!-- 头像 -->
        <el-dropdown>
          <el-avatar style="margin-right: 20px" :size="35" :icon="Avatar"></el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="UserFilled" @click="goToUserProfile">个人中心</el-dropdown-item>
              <el-dropdown-item :icon="StarFilled">收藏</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-main>
      <div class="restaurant-detail">
        <el-card class="restaurant-card">
          <div class="restaurant-header">
            <img :src="restaurant.image" alt="Restaurant Image" class="restaurant-image"/>
            <div class="restaurant-info">
              <h2>{{ restaurant.name }}</h2>
              <el-space direction="vertical" alignment="normal" size="large">
                <el-rate
                    v-model="restaurant.rating"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value} 分"
                />
                <el-text>
                  <el-icon>
                    <Location/>
                  </el-icon>
                  {{ restaurant.address }}
                </el-text>
                <el-text>
                  <PhoneTelephone theme="outline" fill="#333"/>
                  {{ restaurant.phone }}
                </el-text>
              </el-space>
            </div>
          </div>
          <div class="restaurant-menu">
            <h3>菜品列表</h3>
            <el-row :gutter="20">
              <el-col :span="8" v-for="dish in randomDishes" :key="dish.id">
                <el-card class="dish-card">
                  <img :src="dish.image" alt="Dish Image" class="dish-image"/>
                  <div class="dish-info">
                    <h4>{{ dish.name }}</h4>
                    <p>￥{{ dish.price }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="restaurant-reviews">
            <h3>用户评价</h3>
            <el-row>
              <el-col :span="24">
                <el-card class="review-card" v-for="review in randomReviews" :key="review.id">
                  <div style="display: flex; align-items: center;">
                    <Avatar style="width: 20px;"/>
                    <el-text style="margin:0 25px 0 8px">{{ review.name }}</el-text>
                    <el-rate
                        v-model="review.rating"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value} 分"
                    />
                  </div>

                  <p>{{ review.comment }}</p>
                  <template #footer>
                    <div style="display: flex; align-items: end; justify-content: right">
                      {{ formatTime(review.time) }}
                    </div>
                  </template>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-main>

  </el-container>
</template>

<script setup>
import {ref} from 'vue';
import {ElCard, ElCol, ElRate, ElRow} from 'element-plus';
import {Avatar, Location, Reading, StarFilled, UserFilled} from "@element-plus/icons-vue";
import {Back, PhoneTelephone} from "@icon-park/vue-next"
import {useRoute, useRouter} from "vue-router";
import dishes1 from "@/assets/dishes1.jpg";
import dishes2 from "@/assets/dishes2.jpg";
import dishes3 from "@/assets/dishes3.jpg";
import dishes4 from "@/assets/dishes4.jpg";


// 接收传递的路由参数
const router = useRouter();
const route = useRoute();
const restaurant = ref({
  name: route.params.name,
  image: route.query.image,
  address: route.query.address,
  rating: route.query.rating ? parseFloat(route.query.rating) || 0 : 0,
  phone: '18012345678', // 静态电话号码
});

// 静态数据：预存一些菜品和评论
const dishes = [
  {id: 1, name: '招牌牛排', price: 79, image: dishes1},
  {id: 2, name: '提拉米苏', price: 29, image: dishes2},
  {id: 3, name: '全家桶套餐', price: 68, image: dishes3},
  {id: 4, name: '秘汁全鸡', price: 59, image: dishes4},
];

const reviews = [
  {id: 1, name: '匿名用户', comment: '非常棒的餐厅，服务和食物都很满意！', rating: 5, time: Date.now()},
  {id: 2, name: '数学家', comment: '六星好评', rating: 1, time: Date.now()},
  {id: 3, name: '吃货', comment: '量太少了', rating: 4, time: Date.now()},
  {id: 4, name: '逆天', comment: '没点可乐，给我放一瓶可乐，不知道什么毛病', rating: 1, time: Date.now()}
];

// 随机选择一些菜品和评论
const getRandomItems = (items, count = 1) => {
  const shuffled = items.sort(() => 0.5 - Math.random());
  return shuffled.slice(0, count);
};

const randomDishes = ref(getRandomItems(dishes, (Math.random() * 10) % 4 + 1));  // 随机展示菜品
const randomReviews = ref(getRandomItems(reviews, (Math.random() * 10) % 3 + 1)); // 随机展示评论

// 格式化时间显示
const formatTime = (time) => {
  const randomOffset = Math.floor(Math.random() * 7776000000); // 偏移量0~90天
  const date = new Date(time - randomOffset);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');
  const second = date.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

// 返回上一页的方法
const goBack = () => {
  router.back();
};

const goToUserProfile = () => {
  router.push({name: 'UserProfile'});
}

</script>

<style scoped>
.back-button {
  background-color: #42b983;
  color: white;
  border-radius: 8px;
  border: none;
  font-size: 16px;
}

.el-header {
  background-color: rgb(230, 232, 235);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.restaurant-detail {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.restaurant-card {
  display: flex;
  flex-direction: column;
}

.restaurant-header {
  display: flex;
  align-items: center;
}

.restaurant-image {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  margin-right: 20px;
}

.restaurant-info {
  flex: 1;
}

.restaurant-menu,
.restaurant-reviews {
  margin-top: 20px;
}

.dish-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-col {
  margin-bottom: 15px;
}

.dish-image {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}

.review-card {
  margin-bottom: 10px;
}
</style>